<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 85%;overflow-y: hidden">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form"  v-bind="layout" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :span="12" >
            <a-form-model-item label="优惠券类型"  >
              <a-radio-group  v-model="model.couponType" :disabled="defaultDisabled" @change="merchTypeChange">
                <a-radio :value="1">折扣券</a-radio>
                <a-radio :value="2">代金劵</a-radio>
                <a-radio :value="3">展示劵</a-radio>
                <a-radio :value="4">下载劵</a-radio>
                <a-radio :value="5">报名劵</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
           <a-col :span="12" >
            <a-form-model-item label="优惠券名称" required prop="couponName"  >
              <a-input v-model="model.couponName" placeholder="请输入优惠券名称"/>
            </a-form-model-item>
           </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="选择商家" required prop="merchId"  >
              <a-select v-model="model.merchId"  placeholder="请选择商家" @select="merchChange" 
               show-search :filter-option="filterOption"  allow-clear>
                  <a-select-option v-for="obj in merchList" :key="obj.text" :value="obj.value" >{{ obj.text }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
            <a-col :span="12">
            <a-form-model-item label="发放数量" required prop="stockNum"  >
              <a-input-number  v-model="model.stockNum"  placeholder="请输发放数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item :label="model.couponType==1?'折扣':'优惠金额'" required prop="couponDiscount"  >
              <a-input-number v-show="model.couponType==1" v-model="model.couponDiscount" placeholder="请输入折扣" :step="1" style="width: 100%"
              :default-value="1"  :min="0" :max="100" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')" />

              <a-input-number v-show="model.couponType==2" v-model="model.couponDiscount" :precision="2" placeholder="请输入优惠现金"  style="width: 100%"/>
            </a-form-model-item>
          </a-col> -->
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="有效期" required prop="validTime"  >
              <a-range-picker v-model="model.validTime" @change="validOnChange"  format="YYYY-MM-DD" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="免费领取时间" required prop="freeDrawTime"  >
                <a-range-picker v-model="model.freeDrawTime" @change="freeOnChange"  format="YYYY-MM-DD" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <!-- <a-col :span="12">
            <a-form-model-item label="提前购买价格" required prop="advancePurchasePrice"   >
              <a-input-number  v-model="model.advancePurchasePrice" placeholder="请输入提前购买价格"  style="width: 100%" :min="0"
              :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" :parser="value => value.replace(/\$\s?|(,*)/g, '')" />
            </a-form-model-item>
          </a-col> -->
        
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="每人最大可领取数量" required prop="useLimit"  >
              <a-input-number  v-model="model.useLimit"  placeholder="请输入每人最大可领取数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="是否首推"  >
              <a-switch checkedChildren="是" unCheckedChildren="否" v-model="model.ifTop"/>
            </a-form-model-item>
          </a-col>
            <a-col :span="7">
            <a-form-model-item label="首页排序"  >
              <a-input-number  v-model="model.sortNum"  placeholder="值越大优先级越高" style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- <a-row>
          <a-col :span="24">
            <a-form-model-item label="优惠券描述" required prop="commodityTitle" :labelCol="{ xs: { span: 24 }, sm: { span: 3 }}" :wrapperCol="{xs: { span: 20 },sm: { span: 20 }}" >
              <a-textarea v-model="model.commodityTitle" placeholder="请输入优惠券描述" :auto-size="{ minRows: 3, maxRows: 5 }"/>
            </a-form-model-item>
          </a-col>
        </a-row> -->
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="使用规则说明" required prop="useDesc"  :labelCol="{ xs: { span: 24 }, sm: { span: 3 }}" :wrapperCol="{xs: { span: 20 },sm: { span: 20 }}">
              <a-textarea v-model="model.useDesc"   placeholder="请输入使用规则说明"  :auto-size="{ minRows: 3, maxRows: 5 }" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="图片信息(630:376)" required   prop="picUrl" :labelCol="{ xs: { span: 24 }, sm: { span: 3 }}" :wrapperCol="{xs: { span: 20 },sm: { span: 20 }}">
                    <j-image-upload class="avatar-uploader" text="上传" v-model="model.picUrl" :isMultiple="true"></j-image-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
         <a-row v-if="model.couponType=='4'">
          <a-col :span="24">
            <a-form-model-item label="下载文件信息"  required    :labelCol="{ xs: { span: 24 }, sm: { span: 3 }}" :wrapperCol="{xs: { span: 20 },sm: { span: 20 }}">
              <j-upload v-model="model.fileUrl" text="上传" :number="1" :multiple="false"></j-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>

  import { postAction,getAction } from '@/api/manage'
  import JUpload from '@/components/jeecg/JUpload'
  import JDate from '@/components/jeecg/JDate'
  import moment from 'moment'

  export default {
    name: "CategoryModel",
    components: {
      JDate,
      JUpload
    },
    data () {
      return {
        disableSubmit:false,
        title:"操作",
        visible: false,
        defaultDisabled: false,
        model: {
            couponDiscount:1,
            couponStatus:1,
            validTime:[],
            freeDrawTime:[],
            couponType:1,
            useLimit:1,
            sortNum:1,
        },
        show:false,
        layout: {
          labelCol: { span: 7 },
          wrapperCol: { span: 13 },
        },
        confirmLoading: false,
        validatorRules:{
          couponName: [
            { required: true, message: '请输入优惠券名称!' },
            { min: 2, max: 100, message: '长度在 2 到 150 个字符', trigger: 'blur' }
          ],
          commodityTitle: [
            { required: true, message: '请输入优惠券描述!' },
            { min: 2, max: 100, message: '长度在 2 到 150 个字符', trigger: 'blur' }
          ],
          merchId:[
              { required: true, message: '请选择商家!' },
          ],
          validTime: [
            { required: true, message: '请选择有效期!' },
          ],
          freeDrawTime:[
              {required:true,message:"请选择免费领取时间"},
          ],
          advancePurchasePrice:[
              {required:true ,message:"请输入提前购买价格"}
          ],
          stockNum:[
              {required:true ,message:"请输入发放数量"}
          ],picUrl:[
              {required:true ,message:"选择图片"}
          ],
          useDesc:[
            {required:true ,message:"请输入使用规则"},
            { min: 2, max: 100, message: '长度在 2 到 150 个字符', trigger: 'blur' }
          ],
          useLimit:[
            {required:true ,message:"请输入每人限制领取数量"}
          ]
        },
        merchList:[],
        url:{
          add:"/adh/coupon/add",
          edit:"/adh/coupon/edit",
          merchListUrl:"/adh/coupon/queryMerchList"
        }
      }
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      var that = this;
    },
    methods: {
      moment,
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        if(record.couponType==1){
          record.couponDiscount = record.couponDiscount*100;
        }
        if(record.validBeginTime && record.validEndTime){
          record.validTime = [moment(record.validBeginTime, 'YYYY-MM-DD'),moment(record.validEndTime,'YYYY-MM-DD')];
        }
        if(record.freeDrawEndTime && record.freeDrawEndTime){
          record.freeDrawTime =  [moment(record.freeDrawEndTime,'YYYY-MM-DD'),moment(record.freeDrawEndTime,'YYYY-MM-DD')];
        }

        this.queryMerchList();
        this.model = Object.assign({validTime:[],freeDrawTime:[]}, record);
        this.visible = true;
        //编辑页面禁止修改角色编码
        if(this.model.id){
          this.defaultDisabled = true;
        }else{
          this.defaultDisabled = false;
        }
      },
      close () {
        this.$refs.form.clearValidate();
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        console.log(this.model);
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
           
            that.confirmLoading = true;
            let url = "";
            delete this.model.validTime;
            delete this.model.freeDrawTime;
            if(this.model.couponType==1){
              this.model.couponDiscount = this.model.couponDiscount/100;
            }
            if(!this.model.id){
              url = that.url.add;
            }else{
              url = that.url.edit;
            }
            postAction(url,this.model).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(()=>{
              that.confirmLoading = false;
              that.close();
            })
          }else{
            return false;
          }
        })
      },
      handleCancel () {
        this.close()
      },
      queryMerchList(){
        var that = this;
        getAction(this.url.merchListUrl,{}).then((res)=>{
        if(res.success){
            that.merchList = res.result;
          }
        })
      },
      validOnChange(date, dateString) {
        this.model.validBeginTime=dateString[0];
        this.model.validEndTime=dateString[1];
      },
      freeOnChange(date, dateString){
        this.model.freeDrawBeginTime=dateString[0];
        this.model.freeDrawEndTime=dateString[1];
      },
      merchChange(value,option){
          this.model.merchName=option.key;
        //   this.model.merchName = value;
      },
      merchTypeChange(e){
        if(e.target.value==1){
          this.model.couponDiscount = this.model.couponDiscount*100;
        }else{
          this.model.couponDiscount = this.model.couponDiscount/100;
        }
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      }
    }
  }
</script>

<style scoped>

</style>